﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "产品入库";
    Layout = null;
}

@Html.AntiForgeryToken()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@ViewData["Title"]</title>
    <!-- 引入layui CSS -->
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css">
    <style>
        .search-form {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 10px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .search-form .layui-inline {
            margin-right: 15px;
            margin-bottom: 10px;
        }
        .search-form .layui-form-label {
            width: 80px;
        }
        .search-form .layui-input-inline {
            width: 180px;
        }
        .table-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .layui-table-cell .layui-btn + .layui-btn {
            margin-left: 5px;
        }
        .layui-btn-xs {
            height: 26px;
            line-height: 26px;
            padding: 0 8px;
            font-size: 12px;
        }
        .page-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1890ff;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="page-title">产品入库管理</div>
        
        <!-- 搜索表单 -->
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">入库单号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="inboundNo" placeholder="请输入入库单号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">产品编码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="productCode" placeholder="请输入产品编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">产品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="productName" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">生产批次</label>
                        <div class="layui-input-inline">
                            <input type="text" name="batchNo" placeholder="请输入生产批次" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">入库仓库</label>
                        <div class="layui-input-inline">
                            <select name="warehouse">
                                <option value="">全部仓库</option>
                                <option value="成品仓库">成品仓库</option>
                                <option value="半成品仓库">半成品仓库</option>
                                <option value="原材料仓库">原材料仓库</option>
                                <option value="配件仓库">配件仓库</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">入库日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="inboundDateRange" placeholder="请选择日期范围" autocomplete="off" class="layui-input" id="inboundDateRange">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <table id="mainTable" lay-filter="mainTable"></table>
        </div>
    </div>

    <!-- 工具条模板 -->
    <script type="text/html" id="tableBar">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
    </script>

    <!-- 引入jQuery -->
    <script src="~/libs/jquery/jquery.js"></script>
    <!-- 引入layui JS -->
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;
            
            // 初始化日期范围选择器
            laydate.render({
                elem: '#inboundDateRange',
                range: true,
                format: 'yyyy-MM-dd'
            });
            
            // 初始化表格
            function initTable(params) {
                var queryParams = params || {};
                queryParams.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
                
                table.render({
                    elem: '#mainTable',
                    url: '/WarehouseManagement/ProductsInbound/List',
                    method: 'post',
                    where: queryParams,
                    page: true,
                    limit: 10,
                    limits: [10, 20, 50, 100],
                    request: {
                        pageName: 'page',
                        limitName: 'limit'
                    },
                    parseData: function(res) {
                        return {
                            "code": res.code === 0 ? 0 : 1,
                            "msg": res.msg || '',
                            "count": res.count || res.total || 0,
                            "data": res.data || []
                        };
                    },
                    cols: [[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'inboundNo', title: '入库单号', width: 140, sort: true},
                        {field: 'productCode', title: '产品编码', width: 120},
                        {field: 'productName', title: '产品名称', width: 150},
                        {field: 'specification', title: '规格型号', width: 130},
                        {field: 'inboundQuantity', title: '入库数量', width: 100, align: 'center'},
                        {field: 'unit', title: '单位', width: 80, align: 'center'},
                        {field: 'batchNo', title: '生产批次', width: 120},
                        {field: 'inboundDate', title: '入库日期', width: 120, templet: function(d){
                            return layui.util.toDateString(new Date(d.inboundDate), 'yyyy-MM-dd');
                        }},
                        {field: 'warehouse', title: '入库仓库', width: 120},
                        {field: 'location', title: '库位', width: 100},
                        {field: 'operator', title: '操作员', width: 100},
                        {field: 'remark', title: '备注', width: 150},
                        {fixed: 'right', title: '操作', toolbar: '#tableBar', width: 120}
                    ]],
                    skin: 'line',
                    even: true,
                    size: 'sm',
                    text: {
                        none: '暂无产品入库数据'
                    }
                });
            }
            
            // 加载初始数据
            initTable();
            
            // 获取搜索参数
            function getSearchParams() {
                var formData = form.val('searchForm');
                var params = {
                    inboundNo: formData.inboundNo || '',
                    productCode: formData.productCode || '',
                    productName: formData.productName || '',
                    batchNo: formData.batchNo || '',
                    warehouse: formData.warehouse || '',
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
                };
                
                // 处理日期范围
                if (formData.inboundDateRange) {
                    var dateRange = formData.inboundDateRange.split(' - ');
                    if (dateRange.length === 2) {
                        params.inboundDateStart = dateRange[0];
                        params.inboundDateEnd = dateRange[1];
                    }
                }
                
                return params;
            }
            
            // 重新加载表格数据
            function reloadTable() {
                var queryParams = getSearchParams();
                table.reload('mainTable', {
                    where: queryParams,
                    page: {
                        curr: 1
                    }
                });
            }
            
            // 搜索按钮点击事件
            $('#searchBtn').on('click', function() {
                reloadTable();
            });
            
            // 重置按钮点击事件
            $('#resetBtn').on('click', function() {
                form.val('searchForm', {
                    inboundNo: '',
                    productCode: '',
                    productName: '',
                    batchNo: '',
                    warehouse: '',
                    inboundDateRange: ''
                });
                initTable();
            });
            
            // 监听工具条事件
            table.on('tool(mainTable)', function(obj) {
                var data = obj.data;
                
                if(obj.event === 'edit') {
                    // 编辑操作
                    layer.msg('编辑功能暂未开放', {icon: 6});
                } else if(obj.event === 'del') {
                    // 删除操作
                    layer.confirm('确定要删除此产品入库记录吗？', function(index) {
                        $.ajax({
                            url: '/WarehouseManagement/ProductsInbound/Delete',
                            type: 'POST',
                            data: {
                                id: data.id,
                                __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
                            },
                            success: function(res) {
                                if(res.code === 0) {
                                    layer.msg('删除成功');
                                    obj.del();
                                } else {
                                    layer.msg('删除失败：' + (res.msg || '未知错误'));
                                }
                            },
                            error: function(xhr) {
                                layer.msg('删除失败：' + (xhr.responseJSON?.msg || '服务器错误'));
                            }
                        });
                        
                        layer.close(index);
                    });
                }
            });
        });
    </script>

</body>
</html>

